<template>
  <ex-dialog
    width="700px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    :close-on-click-modal="false"
    @closeDialog="handleClose"
  >
    <div class="main" v-loading="loading">
        <div class="listTxt">
          <div class="left">直播日期：</div>
          <div class="right">{{info.workforceDate}}</div>
        </div>
        <div class="listTxt">
          <div class="left">直播时间：</div>
          <div class="right">{{info.liveTime}}</div>
        </div>
        <div class="listTxt">
          <div class="left">直播地点：</div>
          <div class="right">{{info.liveRoomName}}</div>
        </div>
        <div class="listTxt">
          <div class="left">实际开播时间：</div>
          <div class="right">{{info.realLiveTime}}</div>
        </div>
        <div class="listTxt">
          <div class="left">实际直播时长：</div>
          <div class="right">{{info.realTime}}</div>
        </div>
        <div class="listTxt">
          <div class="left">主播姓名：</div>
          <div class="right">{{info.anchorListName}}</div>
        </div>
        <div class="listTxt">
          <div class="left">中控人员：</div>
          <div class="right">{{info.centerControlListName}}</div>
        </div>
        <div class="listTxt">
          <div class="left">关联服务工单：</div>
          <div class="right">{{info.serviceItemRecordId}}</div>
        </div>
        <div class="listTxt">
          <div class="left">直播客户：</div>
          <div class="right">{{info.clientName}}</div>
        </div>
        <div class="listTxt">
          <div class="left">客户负责人：</div>
          <div class="right">{{info.clientNamePrincipal}}</div>
        </div>
        <div class="listTxt">
          <div class="left">客户类型：</div>
          <div class="right">{{info.clientType}}</div>
        </div>
        <div class="listTxt">
          <div class="left">直播状态：</div>
          <div class="right">
            <dict-tag :options="statusList" :value="info.status" />  
          </div>
        </div>
        <div class="listTxt">
          <div class="left">投流费：</div>
          <div class="right">{{info.flowCost}}</div>
        </div>
        <div class="listTxt">
          <div class="left">备注：</div>
          <div class="right">{{info.remark}}</div>
        </div>
    </div>
    <div class="button_box">
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </div>
  </ex-dialog>
</template>
  <script>
import Loading from "@/components/Loading/index";
// api
import {
  calendarDetail,
} from "@/api/customer/rowDateList";
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      labelWidth: "150px",
      inputWidth: "420px",
      title: "查看详情",
      info: {},
      statusList: [],
    };
  },
  computed: {},
  created() {
    this.getDict()
    this.getInfo();
  },
  mounted() {},
  computed: {},
  methods: {
    //获取状态字典
    getDict() {
      var dictType =
        "live_schedule_status";
      this.$getSelectList(dictType)
        .then((res) => {
          this.statusList = res.result[0].dictList
        })
        .finally(() => {
          this.loading = false;
        });
    },

    //服务客户下拉
    getInfo() {
      var id = this.id
      calendarDetail(id)
        .then((res) => {
          this.info = res.result;
          for (var key in this.info) {
            if (this.info[key] === '') {
              this.info[key] = "-";
            }
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },

  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.main{
  padding-left: 40px;
}
.listTxt {
  display: flex;
  justify-content: flex-start;
  height: 50px;
  align-items: center;
  .left {
    width: 120px;
  }
}
.button_box{
  display: flex;
  justify-content: center;
}
</style>
    